<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>动画属性</title>
        <style>
            @keyframes move {
                0% {
                    transform: translate(0, 0);
                }
                100% {
                    transform: translate(1000px, 0);
                }
            }

            div {
                width: 100px;
                height: 100px;
                background-color: pink;
                /* 动画名称 */
                animation-name: move;
                /* 持续时间 */
                /* animation-duration: 2s; */
                /* 运动曲线 */
                /* animation-timing-function: ease; */
                /* 何时开始 */
                animation-delay: 1s;
                /* 重复次数  默认值是1；infinite 则设置无限次*/
                /* animation-iteration-count: infinite; */

                /* 是否反方向播放。默认的是 normal，如果想要反方向则设置为alternate */
                /* animation-direction: alternate; */

                /* 动画结束后的状态，默认的是 backwards 回到起始状态。可以让它停留在结束状态，则配置为forwards */
                /* animation-fill-mode: forwards; */

                /* 动画简写属性 */
                /* animation: name duration timing-function delay iteration-count direction fill-mode; */
                /* animation: move 2s linear 0s 1 alternate forwards; */
                /* 前面2个属性 name  duration 一定要写 */
                /* animation: move 2s linear  alternate forwards; */
            }

            div:hover {
                /* 鼠标经过div 让这个div 停止动画，鼠标离开就继续动画 */
                animation-play-state: paused;
            }
        </style>
    </head>

    <body>
        <div></div>
    </body>
</html>
